<template>
  <el-menu
    :default-active="activeFileId"
    class="file-version-menu"
  >
    <template v-for="project in projects" :key="project.id">
      <!-- 项目标题 -->
      <div 
        class="project-title" 
        @click="toggleProject(project.id)"
      >
        <span class="project-name">{{ project.name }}</span>
        <el-icon :class="['collapse-icon', { 'is-active': openProjectId === project.id }]">
          <ArrowDown />
        </el-icon>
      </div>
      
      <!-- 项目下的版本文件列表 -->
      <template v-if="openProjectId === project.id">
        <el-menu-item
          v-for="file in getSortedFiles(project.files)"
          :key="file.id"
          :index="file.id"
          @click="handleFileSelect(file, project)"
        >
          <el-tooltip
            :content="getFileTooltip(file)"
            placement="right"
            :show-after="500"
          >
            <div class="file-item">
              <span class="file-name">{{ file.name }}</span>
              <span class="file-version">v{{ file.version }}</span>
            </div>
          </el-tooltip>
        </el-menu-item>
      </template>
      
      <!-- 项目分割线 -->
      <el-divider v-if="!isLastProject(project)" />
    </template>
  </el-menu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { ArrowDown } from '@element-plus/icons-vue'
import { useProjectStore } from '@/stores/projectStore'

const store = useProjectStore()
const { projects, activeFileId } = storeToRefs(store)

// 当前打开的项目ID
const openProjectId = ref(null)

// 切换项目展开/折叠
const toggleProject = (projectId) => {
  openProjectId.value = openProjectId.value === projectId ? null : projectId
}

// 打开指定项目
const openProject = (projectId) => {
  openProjectId.value = projectId
}

// 获取排序后的文件列表（按版本号降序）
const getSortedFiles = (files) => {
  return [...files].sort((a, b) => parseFloat(b.version) - parseFloat(a.version))
}

// 判断是否是最后一个项目
const isLastProject = (project) => {
  return projects.value[projects.value.length - 1].id === project.id
}

// 生成文件提示信息
const getFileTooltip = (file) => {
  return `${file.name}_v${file.version}\n上传时间：${file.uploadTime}\n${file.description || '暂无描述'}`
}

const emit = defineEmits(['file-select'])

// 处理文件选择
const handleFileSelect = async (file, project) => {
  store.setActiveFileId(file.id);
  store.setProjectCurrentFile(project.id, file.id);
  
  // 如果是列表视图，触发滚动到对应卡片
  if (store.currentView === 'list') {
    emit('file-select', file.id, 'scroll')
  } 
  // 如果是图表视图，更新依赖数据
  else {
    store.setActiveFileId(file.id);  // 只在图表视图更新 activeFileId
    await store.fetchDependencies(file.name)
    emit('file-select', file.id, 'graph')
  }
}

// 初始化：打开第一个项目
onMounted(() => {
  if (projects.value.length > 0) {
    openProject(projects.value[0].id)
  }
})

defineExpose({
  openProject
})
</script>

<style scoped>
.file-version-menu {
  border-right: none;
}

.project-title {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--el-menu-hover-bg-color);
  cursor: pointer;
}

.project-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--el-text-color-primary);
}

.collapse-icon {
  transition: transform 0.3s;
}

.collapse-icon.is-active {
  transform: rotate(180deg);
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-version {
  margin-left: 8px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  padding: 2px 6px;
}

:deep(.el-menu-item) {
  padding-right: 16px;
}

.el-divider {
  margin: 8px 0;
}
</style> 